<template>
	<view class="container">
		<view class="header-section">
			<image src="/static/icon_wdyh.png"></image>
			<text>共{{memberCount}}人</text>
		</view>
		<view class="user-section">
			<view class="content">
				<app-tabs v-model="tabIndex" :tabs="tabs" :fixed="false" @change="tabChange"></app-tabs>
				<scroll-item ref="mescrollItem" v-for="(tab,index) in tabs" dataType="default" :i="index" :key="index" :index="tabIndex"></scroll-item>
			</view>
		</view>
	</view>
</template>

<script>
	import AppTabs from "@/components/app-tabs.vue";
	import MescrollMoreMixin from "@/components/mescroll-uni/mixins/mescroll-more.js";
	import ScrollItem from "@/components/scroll-items/user-agent-item.vue";

	export default {
		mixins: [MescrollMoreMixin],
		components: {
			AppTabs,
			ScrollItem
		},
		data() {
			return {
				tabs: ['一级用户', '二级用户'],
				tabIndex: 0, // 当前tab下标
				levelOneCount: 0, // 一级总人数
				levelTwoCount: 0, // 二级总人数
				memberCount: 0
			}
		},
		onPageScroll(e) {

		},
		//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
		onPullDownRefresh() {
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onUnload() {
			uni.$off('levelCount');
		},
		onLoad(e) {
			this.memberCount = e.memberCount
			//兼容H5下排序栏位置
			// #ifdef H5
			//定时器方式循环获取高度为止，这么写的原因是onLoad中head未必已经渲染出来。
			let Timer = setInterval(() => {
				let uniHead = document.getElementsByTagName('uni-page-head');
				if (uniHead.length > 0) {
					this.headerTop = uniHead[0].offsetHeight + 'px';
					clearInterval(Timer); //清除定时器
				}
			}, 1);
			// #endif
			// uni.$on('levelCount', onlistenItem => {
			// 	let index = onlistenItem.tabIndex;

			// 	if(index == 0){
			// 		this.levelOneCount += onlistenItem.dataListCount;
			// 		this.tabs[index].substr(0, 4).concat(`(${this.levelOneCount})`)
			// 	}else if(index == 1){
			// 		this.levelTwoCount += onlistenItem.dataListCount;
			// 		this.tabs[index].substr(0, 4).concat(`(${this.levelTwoCount})`)
			// 	}
			// 	// this.tabs = this.tabs.map(e => {
			// 	// 	switch (onlistenItem.tabIndex) {
			// 	// 		case 0:
			// 	// 			console.log(`count0: ${onlistenItem.dataListCount}`)
			// 	// 			this.levelOneCount += onlistenItem.dataListCount;
			// 	// 			return e = e.substr(0, 4).concat(`(${this.levelOneCount})`)
			// 	// 			break;
			// 	// 		case 1:
			// 	// 			console.log(`count1: ${onlistenItem.dataListCount}`)
			// 	// 			this.levelTwoCount += onlistenItem.dataListCount;
			// 	// 			return e.substr(0, 4).concat(`(${this.levelTwoCount})`)
			// 	// 			break;
			// 	// 	}
			// 	// })


			// })


		},
		methods: {

		}

	}
</script>

<style lang="scss">
	page {
		background-color: #FAFAFA;
	}

	.header-section {
		width: 100%;
		height: 350upx;
		padding: 24upx;
		box-sizing: border-box;
		background-color: #FFEDF0;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #232323;
		font-size: 32upx;

		image {
			width: 140upx;
			height: 140upx;
			border-radius: 50%;
			margin-bottom: 25upx;
		}
	}

	.app-tabs {
		border-radius: 20upx 20upx 0 0;
		border-bottom: unset;
	}

	.user-section {
		width: 100%;
		margin-top: -98upx;
		padding: 24upx;

		.content {
			width: 100%;
			border-radius: 20upx;
			box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.1);
			background-color: #fff;
		}



	}
</style>
